// useState，Fragment，function
import { Fragment, useState } from "react";
export default function UseState() {
    const list = [{id:1,name:"1"},{id:2,name:"2"},{id:3,name:"3"}]
    const content = list.map(item =>(
        <Fragment key={item.id}>
            <li>{item.name}</li>
            <li>------------------------</li>
        </Fragment>
    ))
    const title = "标签标题"
    const [divContent,setDivContent] = useState("标签内容")
    const [divContent1,setDivContent1] = useState({id:1,content:"标签内容1"})
    const [data,setData] = useState([{id:1,name:"1"},{id:2,name:"2"},{id:3,name:"3"}])
    const dataContent = data.map(item=>(<li key={item.id}>{item.name}</li>))
    function handleClick(e){
        console.log("点击了按钮",e)
        setDivContent("新标签内容")
        setDivContent1({...divContent1,content:"新标签内容1"})
        // setData([
        //     ...data,
        //     {id:4,name:"4"}
        // ])
        setData(data.filter(item=>item.id!==2))
    }
    return ( 
        <>
        <div title={title}> { divContent } </div>
        <div title={title}> { divContent1.content } </div>
        <ul>{content}</ul>
        <ul>{dataContent}</ul>
        <button onClick={handleClick}>点击</button>
        </>
    );
}